<template>
    <div class="u-p-20">
        <el-form :inline="true" size="small">
            <el-form-item label="时间筛选">
                <el-date-picker
                        type="daterange"
                        v-model="dtrange"
                        align="left"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        :picker-options="pickerOptions"
                        @change="handleDt">
                </el-date-picker>
            </el-form-item>
        </el-form>

        <div class="u-mt-30">
            <div class="common-title">
                <div class="line"></div>
                <div class="txt">关键指标详解</div>
            </div>
            <el-tabs v-model="activeTab" type="card" class="u-mt-20">
                <el-tab-pane label="用户数" name="count">
                    <div id="chart-count"></div>
                </el-tab-pane>
            </el-tabs>
        </div>

        <div class="u-mt-45">
            <div class="common-title">
                <div class="line"></div>
                <div class="txt">详细数据</div>
            </div>
            <el-table :data="chartData" class="u-mt-20" border>
                <el-table-column label="时间" prop="date" sortable></el-table-column>
                <el-table-column label="新用户数" prop="new_visitor"></el-table-column>
                <el-table-column label="新用户占比" prop="new_visitor_percent"></el-table-column>
                <el-table-column label="老用户数" prop="old_visitor"></el-table-column>
                <el-table-column label="老用户占比" prop="old_visitor_percent"></el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import {isEmpty} from '@/libs/util'
    import analysisUser from '@/mixins/analysis-user'
    import G2 from '@antv/g2'
    import { DataSet } from '@antv/data-set'

    export default {
        name:'UserCompare',
        mixins:[analysisUser],
        data() {
            return {
                apiName:'userCompare',
                activeTab:'count',
                chartCount:null
            }
        },
        methods: {
            initChart(data){
                this.chartCount = new G2.Chart({
                    container: 'chart-count',
                    forceFit: true,
                    height: 360,
                    padding: [60, 60, 40, 60]
                })
                this.chartCount.source(data,{
                    'count':{
                        min:0,
                        type:'linear',
                        tickCount:5,
                        nice: true,
                        alias: ''
                    }
                })
                this.chartCount.axis('date', {
                    label:{
                        offset:20
                    }
                })
                this.chartCount.legend('type',{
                    position: 'top-center',
                    offsetY: -20
                })
                this.chartCount.line().position('date*count').color('type')
                this.chartCount.render()
            },
            afterGetData(){
                if(!isEmpty(this.chartCount)){
                    this.chartCount.destroy()
                }
                let ds = new DataSet()
                let dv = ds.createView().source(this.chartData).transform({
                    type: 'rename',
                    map: {
                        new_visitor: '新用户',
                        old_visitor: '老用户'
                    }
                }).transform({
                    type: 'fold',
                    fields: ['新用户', '老用户'],
                    key: 'type',
                    value: 'count'
                })
                this.initChart(dv.rows)
            }
        }
    }
</script>